DAY28：使用 @formkit/auto-animate 添加自動動畫

要將 @formkit/auto-animate 添加到您的專案中，請使用您喜歡的包管理器執行以下命令之一：

# 使用 yarn
yarn add @formkit/auto-animate

# 使用 npm
npm install @formkit/auto-animate

# 使用 pnpm
pnpm add @formkit/auto-animate

AutoAnimate 基本上是一個函數 - autoAnimate，它接受一個父元素作為參數。自動動畫將應用於父元素及其直接子元素。動畫會在以下三種事件之一發生時觸發：

• 向 DOM 添加子元素。
• 從 DOM 中刪除子元素。
• 在 DOM 中移動子元素。
  讓我們看看實際的應用情況。暫時我們將直接使用 autoAnimate 函數。React 和 Vue 使用者 - 以後您將獲得一些額外的語法糖 - 但現在讓我們學習基本原理：

<template>
  <div ref="dropdown" class="dropdown">
    <strong class="dropdown-label" @click="show = !show">
      Click me to open!
    </strong>
    <p class="dropdown-content" v-if="show">Lorum ipsum...</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import autoAnimate from "@formkit/auto-animate"

const dropdown = ref() // 我們需要一個 DOM 节点
const show = ref(false)

onMounted(() => {
  autoAnimate(dropdown.value) // 就這樣！
})
</script>

在這個示例中，我們將 @formkit/auto-animate 添加到 Vue 專案中，並使用 autoAnimate 函數在父元素上進行設置。當點擊 "Click me to open!" 時，將觸發平滑的自動動畫效果。

除了 Vue，React 和 Solid 也支持 @formkit/auto-animate。您可以在您的專案中應用它，讓您的網站元素更加引人注目，而不需要添加過渡效果或自定義 CSS。

以下是成功使用 @formkit/auto-animate 的一些提示：

• 如果您僅進行純粹的 CSS 样式更改（例如懸停效果），則仍然可以使用標准的 CSS 過渡效果。

• 動畫僅在父元素的直接子元素（即您傳遞給 autoAnimate 的元素）添加、移除或移動時才會觸發。

• 如果父元素的位置靜態（position: static），則它將自動獲得 position: relative。這一點在編寫樣式時要牢記。

• 有時候，彈性盒佈局（flexbox layouts）不會立即調整其子元素。具有 flex-grow: 1 屬性的子元素會等待周圍內容，然後才調整到其完整寬度。在這些情況下，@formkit/auto-animate 可能效果不佳，但如果為元素設置了更明確的寬度，則應該可以正常工作。